<template>
  <div class="p-[20px] bg-white">
    <vxe-grid ref="tableRef" v-bind="gridOptions">
      <template #operate="scope">
        <RouterLink
          :to="{
            name: 'PaymentStoreReivcerNew',
            query: { id: scope.row.id, merCupNo: $route.query.merCupNo },
          }"
        >
          <el-button type="text">编辑</el-button>
        </RouterLink>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import PaymentAPI, { PaymentStoreVO } from "@/api/payment";
import { useDict } from "@/composes/useDict";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";
import StoreSubForm from "./components/StoreSubForm.vue";
import PaymentSplitAPI from "@/api/split";

interface RowVO {
  [key: string]: any;
}

const router = useRouter();
const route = useRoute();

const formDialogVisible = ref(false);
const formDialogData = ref({});

const handleEdit = (row: PaymentStoreVO) => {
  formDialogData.value = row;
  formDialogVisible.value = true;
};

const gridOptions = reactive<VxeGridProps<PaymentStoreVO>>({
  showOverflow: true,
  border: true,
  height: 548,
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    data: {},
    items: [],
  },
  proxyConfig: {
    form: false,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page }) => {
        const form: PaymentStoreVO = gridOptions.formConfig?.data;
        return PaymentSplitAPI.getReceiverList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { title: "支付开通时间", field: "createdAt", minWidth: 160 },
    { title: "分账接收方", field: "name", minWidth: 160 },
    { title: "第三方名称", field: "acctName", minWidth: 160 },
    { title: "账户类型", field: "acctTypeCode", minWidth: 160 },
    { title: "分账绑定状态", field: "status", minWidth: 160 },
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      align: "center",
      showOverflow: false,
      slots: { default: "operate" },
      minWidth: 300,
    },
  ],
});

const initFormConfig = (dicts: any) => {
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      // 商家名称
      {
        field: "name",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "分账方名称",
          },
        },
      },
      {
        field: "acctName",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "第三方名称",
          },
        },
      },
      {
        field: "acctTypeCode",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: [
            { label: "对公", value: 57 },
            { label: "对私", value: 58 },
          ],
          props: {
            placeholder: "账户类型",
          },
        },
      },
      {
        field: "status",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: [
            { label: "未绑定", value: 0 },
            { label: "已绑定", value: 1 },
          ],
          props: {
            placeholder: "分账绑定状态",
          },
        },
      },
      {
        field: "createdAt",
        title: "",
        span: 8,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          events: {
            click(cellParams, params) {
              if (params.name === "add") {
                router.push({
                  name: "PaymentStoreReivcerNew",
                  query: {
                    storeCode: route.query.storeCode,
                    merCupNo: route.query.merCupNo,
                  },
                });
              }
            },
          },
          options: [
            { type: "submit", content: "搜索", status: "primary" },
            { content: "创建分账方", name: "add" },
          ],
        },
      },
    ];
  }
};

useDict((dict) => {
  initFormConfig(dict);
});

// const route = useRoute();

const tableRef = ref();

const reloadTable = () => {
  tableRef.value.commitProxy("query");
};

// onMounted(() => {
//   if (route.query.storeCode) {
//     if (gridOptions.formConfig?.data) {
//       gridOptions.formConfig.data.parentMerchantNo = route.query.storeCode;
//       reloadTable();
//     }
//   }
// });
</script>
